<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Editor Test</title>

	<script type="text/javascript" src="../boilerplate.js"
		data-dojo-config="parseOnLoad: false, has: {'dojo-bidi': true}">
	</script>


	<script type="text/javascript">
		require([
			"dojo/_base/declare",
			"dojo/parser",	// scan page for widgets and instantiate them
			"dijit/Editor",
			"dojo/domReady!"
		], function(declare, parser, Editor){

			parser.parse();

			var editor1 = new Editor({
				dir: 'ltr',
				textDir: 'rtl',
				height: '75px',
				value: ''
			}, "prog1");
			editor1.startup();
			
			var editor2 = new Editor({
				dir: 'rtl',
				textDir: 'ltr',
				height: '75px',				
				value: ''				
			}, "prog2");
			editor2.startup();
		});

	</script>
</head>

<body class="claro" role="main">
	<h1 class="testTitle">Editor GUI orientation and default text direction Test</h1>
	<h2 class="testTitle" style="text-align: center;">Created from div.</h2>
	<table width='100%'>
	<tr><td width='49%' dir='ltr'>
		<div data-dojo-type="dijit/Editor"
			data-dojo-props="styleSheets:'../../themes/claro/document.css', height:'70px'"
			id="ed1">
		</div>
	</td>
	<td width='2%'></td>
	<td dir='rtl'>	
		<div data-dojo-type="dijit/Editor"
			data-dojo-props="styleSheets:'../../themes/claro/document.css', height:'70px'"
			id="ed2">
		</div>
	</td></tr>
	<tr><td width='49%'>
		<div data-dojo-type="dijit/Editor"
			data-dojo-props="styleSheets:'../../themes/claro/document.css', height:'70px', dir: 'ltr', textDir: 'rtl'"
			id="ed3">
		</div>
	</td>
	<td width='2%'></td>
	<td>	
		<div data-dojo-type="dijit/Editor"
			data-dojo-props="styleSheets:'../../themes/claro/document.css', height:'70px', dir: 'rtl', textDir: 'ltr'"
			id="ed4">
		</div>
	</td></tr>
	</table>
	
	<h2 class="testTitle" style="text-align: center;">Programmatic creation.</h2>
	<table width='100%'>
	<tr><td width='49%'>
		<div id="prog1">This div will become a programmatic editor in addOnLoad.</div>
	</td>
	<td width='2%'></td>
	<td>
		<div id="prog2">This div will become a programmatic editor in addOnLoad.</div>
	</td></tr>
	</table>
</body>
</html>
